<script setup>
import {ref, reactive, onMounted} from 'vue'
import InputForm from './components/InputForm.vue'
import TodoList from './components/TodoList.vue'
const todolist = ref([
  {
    id: 1,
    title: 'task1',
    status: false
  },
  {
    id: 2,
    title: 'task2',
    status: false
  },
  {
    id: 3,
    title: 'task3',
    status: false
  },
  {
    id: 4,
    title: 'task4',
    status: false
  }
])
const add = (title) => {
  let id = Math.random().toString().slice(-5)
  todolist.value.push({
    id,
    title,
    status: false
  })
}
const edit = (id) => {
  todolist.value.forEach(item => {
    if (item.id === id) {
      item.status = !item.status
    }
  })
}
const del = (id) => {
  todolist.value = todolist.value.filter(item => item.id !== id)
}

</script>

<template>
  <div>
    <h1>todolist清单</h1>
    <input-form :add="add"></input-form>
    <todo-list :edit="edit" :del="del" :todolist="todolist"></todo-list>
  </div>
</template>

<style scoped>

</style>
